<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
  <script type="text/javascript" src="../vue.js"></script>
  <style>
    .one {
      color: green;
    }

    .two {
      color: blue;
    }
  </style>
</head>

<body>
  <!-- v-if接受一个布尔值,控制元素是否渲染出来到浏览器中 -->
  <div id="app">
    <h1>以下是今天的天气播报</h1>
    <!-- v-if接受一个布尔值,控制元素是否渲染出来到浏览器中 -->
    <p v-if="isHot">今天天气说实话有点热</p>
    <p v-if="!isHot">今天的天气说实话有点冷来着</p>
    <button @click="isHot=!isHot">点击切换天气</button>
    <!-- v-if v-else 和if else 的功能差不多 如果非黑即白的时候可以使用这个会比较方便-->
    <p v-if="happy">今天心情很好</p>
    <p v-else>今天心情一般</p>
    <button @click="happy=!happy">点击切换心情</button>
    <!-- v-if v-else-if 主要用在多个条件的使用 -->
    <input type="text" placeholder="请输入你的成绩" v-model.number="fen">
    <!-- 
        当条件渲染的模板过多,但是没有一个统一的父级的时候,我们也不想添加一个额外的父级,可以使用template标签,帮我们把一些结构整合在一起
       -->
    <template v-if="fen>=90">
      <p>优秀</p>
      <p>继续保持</p>
      <p>你的成绩是{{fen}}</p>
    </template>

    <template v-else-if="fen>=70">
      <p>良</p>
      <p>未来可期</p>
      <p>你的成绩是{{fen}}</p>
    </template>

    <template v-else-if="fen>=60">
      <p>及格</p>
      <p>上升空间很大</p>
      <p>你的成绩是{{fen}}</p>
    </template>

    <template v-else>
      <p>不合格</p>
      <p>不行就回去养猪</p>
      <p>你的成绩是{{fen}}</p>
    </template>
    <!-- 登录注册切换 -->
    <div>
      <button @click="isLogin=true">登录</button>
      <button @click="isLogin=false">注册</button>
    </div>
    <!-- 登录 -->
    <template v-if="isLogin">
      <input type="text" placeholder="请输入你的账号" class="one">
      <input type="text" placeholder="请输入你的密码">
    </template>
    <!-- 注册 -->
    <template v-else>
      <input type="text" placeholder="创建你的账号" class="two">
      <input type="text" placeholder="请输入你的密码">
    </template>
    <!-- v-show也是需要接收一个boolean 决定当前元素时display：none还是block -->
    <button @click="type=1">1</button>
    <button @click="type=2">2</button>
    <button @click="type=3">3</button>
    <button @click="type=4">4</button>
    <ul v-show="type===1">
      <li>一条</li>
    </ul>
    <ul v-show="type===2">
      <li>2条</li>
    </ul>
    <ul v-show="type===3">
      <li>3条</li>
    </ul>
    <ul v-show="type===4">
      <li>4条</li>
    </ul>
  </div>

</body>
<script type="text/javascript">
  Vue.config.productionTip = false
  const vm = new Vue({
    el: "#app",
    data() {
      return {
        isHot: true,
        happy: true,
        fen: null,
        isLogin: true,
        type: null
      }
    }
  })
</script>

</html>